<template>
	<div class="w-h-100">
		<el-form :model="formData" ref="formRef" :size="size" :label-width="labelWidth + 'px'" :label-position="labelPosition">
			<el-row :gutter="35">
				<template v-for="(item, index) in formList" :key="index">
					<template v-if="item.type == 'divider'">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<div style="padding: 10px 0">
								<el-divider
									:content-position="item?.dividerOption?.contentPosition || 'left'"
									:direction="item?.dividerOption?.direction || 'horizontal'"
									:border-style="item?.dividerOption?.borderStyle"
								>
									<span :style="{ color: item.dividerOption?.titleColor || '#999', fontSize: item.dividerOption?.titleSize || '16px' }">
										{{ item.dividerOption?.title || '' }}
									</span>
								</el-divider>
							</div>
						</el-col>
					</template>
					<template v-else>
						<el-col
							:xs="item?.size?.xs || 12"
							:sm="item?.size?.sm || 12"
							:md="item?.size?.md || 12"
							:lg="item?.size?.md || 12"
							:xl="item?.size?.xl || 12"
							:class="{ mb20: size == 'default', mb12: size == 'small', mb30: size == 'large' }"
							v-if="item?.show == undefined ? true : item.show"
						>
							<template v-if="item.type == 'slot'">
								<slot :name="item?.slotName" :data="{ formData, item }"></slot>
							</template>
							<template v-else>
								<el-form-item
									:label="item.label"
									:prop="item.key"
									:rules="item.rules"
									:labelWidth="item.labelWidth"
									:class="{ disableBack: item?.disabledStyle, disableText: item?.disabledStyle, disableTextarea: item?.disabledStyle }"
								>
									<template v-if="item.type == 'input'">
										<template v-if="item.hasOwnProperty('bind')">
											<template v-if="item.bind">
												<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
											</template>
											<template v-else>
												<el-input :model-value="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
											</template>
										</template>
										<template v-else>
											<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
										</template>
									</template>
									<template v-if="item.type == 'textarea'">
										<el-input v-model="formData[item.key]" :placeholder="item.placeHolder" type="textarea" :disabled="item?.disabled || item?.disabledStyle || false" />
									</template>
									<template v-if="item.type == 'number'">
										<el-input v-model.number="formData[item.key]" :placeholder="item.placeHolder" :disabled="item?.disabled || item?.disabledStyle || false" />
									</template>
									<template v-if="item.type == 'select'">
										<template v-if="item?.selectOption?.type">
											<el-select
												v-model="formData[item.key]"
												:multiple="item?.selectOption?.multiple || false"
												filterable
												remote
												reserve-keyword
												:remote-show-suffix="true"
												:placeholder="item.placeHolder"
												:remote-method="(params: any) => { selectRemoteMethod(params, item) }"
												:loading="item?.selectOption.loading"
												@change="(params: any) => selectChangeHandle(params, item)"
												@focus="(params: any) => selectRemoteMethod(null, item)"
												style="width: 100%"
												:disabled="item?.disabled || item?.disabledStyle || false"
											>
												<el-option :label="op.label" :value="op.value" v-for="(op, opIndex) in item.options" :key="opIndex + op.label">
													{{ op.label }}
													<template v-if="item?.selectOption?.showMore && item?.selectOption?.showMore.length">
														<span style="font-size: 12px; color: #999; font-style: normal">
															(
															<i v-for="(moreItem, moreIndex) in item?.selectOption?.showMore" :key="moreIndex" style="font-style: normal">
																<template v-if="op[moreItem.key]"> {{ moreItem.label }}: {{ op[moreItem.key] }} </template>
																<template v-if="moreIndex != item?.selectOption?.showMore.length - 1"> , </template>
															</i>
															)
														</span>
													</template>
												</el-option>
											</el-select>
										</template>
										<template v-else>
											<el-select v-model="formData[item.key]" :placeholder="item.placeHolder" style="width: 100%">
												<el-option :label="op.label" :value="op.value" v-for="(op, opIndex) in item.options" :key="opIndex + op.label" :disabled="item?.disabled || item?.disabledStyle || false" />
											</el-select>
										</template>
									</template>
									<template v-if="item.type == 'radio'">
										<el-radio-group v-model="(formData[item.key] as string)" style="width: 100%" :disabled="item?.disabled || item?.disabledStyle || false">
											<el-radio :label="op.value" size="small" v-for="(op, opIndex) in item.options" :key="opIndex + op.value">
												{{ op.label }}
											</el-radio>
										</el-radio-group>
									</template>
									<template v-if="item.type == 'checkbox'">
										<el-checkbox-group v-model="formData[item.key]" style="width: 100%">
											<el-checkbox v-for="(op, opIndex) in item.options" :key="opIndex + op.value" :label="op.value">
												{{ op.label }}
											</el-checkbox>
										</el-checkbox-group>
									</template>
									<template v-if="item.type == 'switch'">
										<el-switch v-model="formData[item.key]" />
									</template>
									<template v-if="item.type == 'date'">
										<template v-if="item?.dateOption?.type && (item.dateOption.type === 'monthrange' || item.dateOption.type === 'daterange')">
											<el-date-picker
												v-model="formData[item.key]"
												:type="item?.dateOption?.type || 'date'"
												:placeholder="item.placeHolder"
												:format="item?.dateOption?.format || 'YYYY-MM-DD'"
												:range-separator="item?.dateOption?.separator || 'To'"
												:start-placeholder="item?.dateOption?.startPlaceHodler || ''"
												:end-placeholder="item?.dateOption?.endPlaceHodler || ''"
												unlink-panels
												style="width: 100%"
											/>
										</template>
										<template v-else>
											<el-date-picker
												v-model="formData[item.key]"
												:type="item?.dateOption?.type || 'date'"
												:placeholder="item.placeHolder"
												:format="item?.dateOption?.format || 'YYYY-MM-DD'"
												style="width: 100%"
											/>
										</template>
									</template>
									<template v-if="item.type == 'upload'">
										<el-upload
											v-model:file-list="formData[item.key]"
											class="upload-demo"
											list-type="picture"
											:auto-upload="false"
											:on-change="(file: any, files: any) => { fileChangeHandle(file, files, item) }"
											:multiple="item?.uploadOption?.multiple || false"
											:limit="item?.uploadOption?.limit || 1"
											style="width: 100%"
										>
											<el-button type="primary" size="small" plain>选择文件</el-button>
											<template #file="{ file: UploadFile }">
												<div style="width: 100%; position: relative">
													<a :href="UploadFile.url" class="hr-flex-start file-item" target="_blank">
														<!-- <img :src="UploadFile.url" alt="" style="width: 100px; height: 100px;"> -->
														<div class="hr-flex-start">
															<el-icon style="font-size: 16px">
																<Document />
															</el-icon>
														</div>
														<div style="margin-left: 20px">
															{{ UploadFile.name }}
														</div>
													</a>
													<span class="close-icon" @click="deleteFileItem(item, UploadFile)">
														<el-icon>
															<Close />
														</el-icon>
													</span>
												</div>
											</template>
										</el-upload>
									</template>
									<template v-if="item.type == 'cascader'">
										<el-cascader
											v-model="formData[item.key]"
											:placeholder="item.placeHolder"
											:options="item.options"
											filterable
											:props="item?.cascaderOption?.props || {}"
											@focus="() => item?.cascaderOption?.requestMethod && item?.cascaderOption?.requestMethod(item)"
											@visible-change="() => item?.cascaderOption?.requestMethod && item?.cascaderOption?.requestMethod(item)"
											:show-all-levels="item.cascaderOption?.hasOwnProperty('showAalLevels') ? item.cascaderOption?.showAalLevels : true"
											style="width: 100%"
										/>
									</template>
									<template v-if="item.type == 'inputNumber'">
										<el-input-number 
											v-model="formData[item.key]" 
											:min="item?.inputNumberOption?.min || 0" 
											:max="item?.inputNumberOption?.max || Infinity"  
											:controls-position="item?.inputNumberOption?.controlsPosition"
											:step="item?.inputNumberOption?.step || 1" 
											style="width: 100%"
										/>
									</template>
								</el-form-item>
							</template>
						</el-col>
					</template>
				</template>
			</el-row>
		</el-form>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs, onMounted, PropType } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { Local } from '/@/utils/storage';

import moment from 'moment';
moment.locale('zh-cn');

type rulesType = {
	required?: boolean;
	validator?: Function;
	message?: string;
	[propsName: string]: any;
};
type formType = {
	type: string;
	label: string;
	key: string;
	value: string | number | any[] | boolean;
	slotName?: string; // 插槽
	show?: boolean; // 是否显示，默认显示
	placeHolder?: string;
	labelWidth?: string;
	disabled?: boolean;
	disabledStyle?: boolean;
	options?: any[];
	rules: rulesType[];
	dateOption?: {
		type?: string;
		format?: string; // element表单的格式化
		dataFormat?: string; // element表单的格式化 提交表单的格式化, 如果不提供则不格式化
		[propsName: string]: any;
	};
	selectOption?: {
		type: string; // 类型，是否是远程搜索，给remote就ok
		requestMethod: Function; // 搜索请求方法
		searchKey?: string; // 搜素字段
		otherParams?: any; // 其他的请求参数
		value: string; // value 用的是返回搜索返回数据中的哪个字段
		label: string; // label 用的是返回搜索返回数据中的哪个字段
		multiple?: boolean;
		loading: boolean; // 加载
		fill?: any; // 需要填充数据的字段{提交表单的字段: 返回数据的字段}
		dependOnParams?: object; // 是否依赖表单中其他的字段进行搜素 参数形式：{表单的键名： 服务器搜索键名}
		showMore?: { key: string; label: string }[]; // option中显示更多字段的信息
	};
	dividerOption?: {
		// 分割线配置
		title?: string;
		titleColor?: string;
		titleSize?: number;
		contentPosition?: string; // 位置
		borderStyle?: object; // 设置分隔符样式
		direction?: string; // 设置分割线方向
	};
	cascaderOption?: {
		// 级联选择器的配置项
		requestMethod?: Function; // 级联选择器的数据请求方法
		props?: any;
		showAalLevels?: boolean;
	};
	uploadOption?: {
		multiple?: boolean; // 是否多选
		limit?: number; // 文件限制
	};
	size?: {
		xs?: number;
		sm?: number;
		md?: number;
		lg?: number;
		xl?: number;
	};
	watch?: boolean; // 是否监听该字段
	bind?: boolean; // 是否双向 绑定
	inputNumberOption?: {
		max?: number
		min?: number
		step?: number
		precision?: number
		controlsPosition?: string
	}
};
interface formDataType {
	[propsName: string]: any;
}
export default defineComponent({
	components: {},
	props: {
		labelPosition: {
			// label 对齐方式
			type: String,
			default: 'right',
		},
		size: {
			// 尺寸
			type: String,
			default: Local.get('themeConfig').globalComponentSize == 'small' ? 'small' : Local.get('themeConfig').globalComponentSize == 'large' ? 'large' : 'default',
		},
		labelWidth: {
			// 尺寸
			type: Number,
			default: 100,
		},
		formWidth: {
			//form宽度
			type: String,
			default: '50%',
		},
		fullscreen: {
			//全屏属性
			type: Boolean,
			default: false,
		},
		hideFooter: {
			//显示footer
			type: Boolean,
			default: false,
		},
		beforeHandler: {
			//在提交之前先调用的方法
			type: Function as PropType<any>,
			default: null,
		},
		formDataProps: {
			type: Array as PropType<any[]>,
			default: [] as any[],
		}
	},
	setup(props, ctx) {
		//根据浏览器宽度来展示form宽度
		let FormWidth = ref(props.formWidth);
		let Fullscreen = ref(props.fullscreen);
		const fullAction = () => {
			Fullscreen.value = !Fullscreen.value;
		};
		const handleClose = (done: () => void) => {
			Fullscreen.value = props.fullscreen;
			done();
		};
		onMounted(() => {
			window.onresize = () => {
				return setDialogWidth();
			};

			let { formDataProps } = props
			state.formList = deepCopy(formDataProps);
			formDataProps.forEach((item: formType) => {
				if (item.key) {
					allFormData[item.key] = item.value;
				}
			});
			state.formData = allFormData;

		});
		function setDialogWidth() {
			var val = document.body.clientWidth;
			const def = 1540; // 默认宽度
			if (val < def && props.formWidth == '50%') {
				FormWidth.value = '769px';
			} else {
				FormWidth.value = props.formWidth;
			}
		}

		// 深拷贝
		const deepCopy = (data: any) => {
			let res: any = typeof data.splice === 'function' ? [] : {};
			if (typeof data === 'object') {
				for (let key in data) {
					if (data[key] && typeof data[key] === 'object') {
						res[key] = deepCopy(data[key]);
					} else {
						res[key] = data[key];
					}
				}
			}
			return res;
		};

		const state = reactive({
			formList: [] as formType[],
			formData: {} as formDataType,
			isShowDialog: false,
			title: '',
		});

		// 创建表单验证
		let rulesObj: FormRules = {};
		// 表单所有属性
		let allFormData: formDataType = {};

		const formRef = ref<FormInstance>();

		// 打开弹窗
		const openDialog = (formList: formType[], title: string = '') => {
			state.formList = deepCopy(formList);
			formList.forEach((item: formType) => {
				if (item.key) {
					allFormData[item.key] = item.value;
				}
			});
			state.formData = allFormData;
			state.isShowDialog = true;
			state.title = title;
		};

		// 删除文件
		const deleteFileItem = (formItem: any, file: any) => {
			let name: any = file.name;
			let fileList: any[] = formItem.value;
			if (fileList.length) {
				for (let i = 0; i < fileList.length; i++) {
					if (name == fileList[i].name) {
						fileList.splice(i, 1);
						break;
					}
				}
			}
		};

		// 上传文件变化时
		const fileChangeHandle = (file: any, files: any[], formItem: any) => {
			formItem.value = files;
		};

		// 将文件的blob转成 base64
		const getBase64 = (file: any, name: string): Promise<any> => {
			if (file == '') return Promise.resolve('');
			return new Promise((resolve, reject) => {
				// 判断是否是blob类型
				if (file instanceof Blob) {
					let reader = new FileReader();
					let fileResult: any = '';
					console.log(file);
					reader.readAsDataURL(file);
					//开始转
					reader.onload = function () {
						fileResult = reader.result;
					};
					//转 失败
					reader.onerror = function (error) {
						reject(error);
					};
					//转 结束  咱就 resolve 出去
					reader.onloadend = function () {
						resolve({ data: fileResult, name: name });
					};
				} else {
					// 吧http截掉
					let newFile = file.replace(window.$host, '');
					resolve({ data: newFile, name: name });
				}
			});
		};

		// 提交表单
		const submitHandle = async () => {
			if (!formRef) return;
			return validateHandle()
			
		};

		const validateHandle  = () => {
			return new Promise( (resolve, reject) => {
				formRef.value.validate(async (valid) => {
					if (valid) {
						try {
							// 提交之前先执行提交前要执行的方法
							if (props.beforeHandler != null) {
								let res = await props.beforeHandler();
								if (!res) return;
							}
							// 判断表单中是否有文件上传选项
							for (let i = 0; i < state.formList.length; i++) {
								let res = await dealBase64(state.formList[i]);
							}
							// 判断是否有date类型, 如果有则格式化
							state.formList.forEach((item) => {
								if (item.type === 'date') {
									let format = item?.dateOption?.dataFormat; // 格式化类型， 不提供返回原样数据
									if (!format) return;
									if (Array.isArray(state.formData[item.key])) {
										console.log(state.formData[item.key].length);
										if (state.formData[item.key].length) {
											state.formData[item.key] = state.formData[item.key].map((v: any) => {
												return (v && moment(v).format(format)) || '';
											});
										}
									} else {
										state.formData[item.key] = (state.formData[item.key] && moment(state.formData[item.key]).format(format)) || '';
									}
								}
							});
							return resolve(JSON.parse(JSON.stringify(state.formData)))
			
						} catch (err) {
							return reject(null)
						} finally {
						}
					} else {
						return reject(null)
					}
				});
			})
		}

		//  select 远程搜索
		const selectRemoteMethod = async (query: any, item: any) => {
			item.selectOption.loading = true;
			let selectOp: any = item.selectOption;
			let params: any = {};
			if (selectOp.searchKey && query) {
				params[selectOp.searchKey] = query;
			}
			if (selectOp.otherParams) {
				params = { ...params, ...selectOp.otherParams };
			}
			// 如果有依赖其他表单字段进行搜素的
			if (selectOp.dependOnParams) {
				let depParams: any = {};
				for (let key in selectOp.dependOnParams) {
					let searchKey: any = selectOp.dependOnParams[key];
					let searchVal: any = state.formData[key];
					depParams[searchKey] = searchVal;
				}
				params = { ...params, ...depParams };
			}
			let remoteMethod: any = item.selectOption.requestMethod || null;
			let opArr: any[] = [];
			if (!remoteMethod) return;
			let res: { data: any } = await remoteMethod(params as object);

			//   有些返回数据是放在data字段中的
			if (res.data.length) {
				opArr = res.data.map((item: any) => {
					// 返回的数据可能只是一个字符串，不是对象
					if (typeof item === 'string') {
						return {
							value: item,
							label: item,
						};
					} else {
						let itemCopy = deepCopy(item);
						let value: any = itemCopy[selectOp.value] || '';
						let label: any = itemCopy[selectOp.label] || '';
						let op = {
							value: value,
							label: label,
						};
						let returnObj: object = {
							...itemCopy,
							...op,
						};
						return returnObj;
					}
				});
			}
			// 有些返回数据是放在rows字段中的
			if (res.data.rows && res.data.rows.length) {
				opArr = res.data.rows.map((item: any) => {
					let itemCopy = deepCopy(item);
					let value: any = itemCopy[selectOp.value] || '';
					let label: any = itemCopy[selectOp.label] || '';
					let op = {
						value: value,
						label: label,
					};
					let returnObj: object = {
						...itemCopy,
						...op,
					};
					return returnObj;
				});
			}
			item.selectOption.loading = false;
			item.options = opArr;
		};
		// select改变方法
		const selectChangeHandle = (seleted: any, item: any) => {
			let options: any[] = item.options;
			let filterItem = options.filter((item) => {
				return seleted === item.value;
			});
			let itemFill: any = item.selectOption.fill;
			if (filterItem.length && itemFill) {
				let itemObj: any = filterItem[0];
				for (let key in itemFill) {
					let fillVal: any = itemFill[key];
					let realVal = itemObj[fillVal] || '';
					state.formData[key] = realVal;
				}
			}
			//filterItem->选中的对, item当前select组件的信息
			ctx.emit('selectChange', filterItem, item);
		};
		// 处理base64
		const dealBase64 = async (item: any) => {
			if (item.type === 'upload') {
				// console.log(item.key, 'item.key');
				let fileList: any[] = state.formData[item.key];
				let newFileList: any[] = [];
				if (fileList.length > 0) {
					let promiseList: Promise<any>[] = [];
					fileList.forEach((item: any) => {
						if (!item.id) {
							// console.log(item)
							promiseList.push(getBase64(item.raw || item.url, item.name || ''));
						} else {
							newFileList.push(item);
						}
					});
					if (promiseList.length > 0) {
						let res: any[] = await Promise.all(promiseList);
						newFileList = [...newFileList, ...res];
					}
					state.formData[item.key] = newFileList;
				}
				return Promise.resolve(newFileList);
			}
		};

		let keyList: any = []; // 被监听的key

		// 监听formData
		watch(
			() => {
				// 找出需要监听的字段
				let watchList: any[] = state.formList.filter((item) => {
					return item?.watch;
				});
				keyList = [];
				let valList = watchList.map((item) => {
					keyList.push(item.key);
					return state.formData[item.key];
				});
				return valList;
			},
			(newVal, odlVal) => {
				let obj: any = {};
				let valueList: any[] = keyList.map((item: any, index: any) => {
					let newValCopy = newVal[index] ? newVal[index] : '';
					let oldValCopy = odlVal[index] ? odlVal[index] : '';
					obj[item] = {
						newVal: newValCopy,
						oldVal: oldValCopy,
						isChanged: newValCopy == oldValCopy ? false : true,
					};
					return {
						key: item,
						newVal: newVal[index],
						oldVal: odlVal[index],
					};
				});
				ctx.emit('watchCallBack', valueList, state.formData, state.formList, obj);
			},
			{ deep: true }
		)
		
		// 重置
		const reload = () => {
			let { formDataProps } = props
			state.formList = deepCopy(formDataProps);
			formDataProps.forEach((item: formType) => {
				if (item.key) {
					allFormData[item.key] = item.value;
				}
			});
			state.formData = allFormData;
		}

		return {
			...toRefs(state),
			openDialog,
			formRef,
			submitHandle,
			deleteFileItem,
			fileChangeHandle,
			selectRemoteMethod,
			selectChangeHandle,
			FormWidth,
			fullAction,
			Fullscreen,
			handleClose,
			reload,
		};
	},
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
	max-height: calc(100vh - 150px) !important;
}
.disableBack {
	:deep(.el-input.is-disabled .el-input__wrapper) {
		background-color: white;
		color: #030303;
	}
}
.disableText {
	:deep(.el-input.is-disabled .el-input__inner) {
		-webkit-text-fill-color: #030303;
	}
}
.disableTextarea {
	:deep(.el-textarea.is-disabled .el-textarea__inner) {
		background-color: white;
		color: #030303;
	}
}
.header {
	display: flex;
	justify-content: space-between;
}
.fullIcon {
	cursor: pointer;
	:hover {
		color: #f46c6c;
	}
}
.close-icon {
	color: grey;
	font-size: 16px;
	position: absolute;
	top: -5px;
	right: 0;
	cursor: pointer;
	padding: 0px;
	&:hover {
		color: red;
	}
}
.file-item {
	cursor: pointer;
	&:hover {
		color: blue;
	}
}
</style>

<!-- 
            let list: any = [{
                type: 'input',
                label: '商品',
                key: 'product',
                value: '',
                placeHolder: '请输入商品',
                rules: [
                    { required: true, message: '未达标程度不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                    
                },
            }, {
                type: 'input',
                label: '数量',
                key: 'number',
                value: '',
                placeHolder: '请输入数量',
                rules: [
                    { required: true, message: '未达标程度不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'textarea',
                label: '备注',
                key: 'remark',
                value: '',
                placeHolder: '请输入备注',
                rules: [
                    { required: true, message: '备注不能为空', trigger: 'blur' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'number',
                label: '金额',
                key: 'money',
                value: '',
                placeHolder: '请输入金额',
                rules: [
                    { required: true, message: '金额不能为空', trigger: 'blur', type: 'number' }
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'select',
                label: '职业',
                key: 'job',
                value: '',
                options: [{
                    label: '工人',
                    value: 1
                }, {
                    label: '农民',
                    value: 2
                }, {
                    label: '商人',
                    value: 3
                }],
                placeHolder: '请输入职业',
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'radio',
                label: '所在城市',
                key: 'city',
                value: 1,
                options: [{
                    label: '广州',
                    value: 1
                }, {
                    label: '北京',
                    value: 2
                }, {
                    label: '上海',
                    value: 3
                }],
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'checkbox',
                label: '入选城市',
                key: 'selectCity',
                value: [1],
                options: [{
                    label: '广州',
                    value: 1
                }, {
                    label: '北京',
                    value: 2
                }, {
                    label: '上海',
                    value: 3
                }],
                rules: [
                    { required: true, message: '请输入职业', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            },{
                type: 'date',
                label: '开始时间',
                key: 'beginDate',
                value: '',
                dateOption: {
                    type: 'daterange',
                    format: 'YYYY-MM-DD',
                    startPlaceHodler: '开始时间',
                    endPlaceHodler: '结束时间',
                    separator: '到'
                },
                placeHolder: '请输入开始时间',
                rules: [
                    { required: true, message: '请输入开始时间', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'upload',
                label: '文件',
                key: 'files',
                value: [],
                rules: [
                    { required: true, message: '文件不能为空', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            }, {
                type: 'switch',
                label: '是否启用',
                key: 'forbid',
                value: true,
                rules: [
                    { required: true, message: '文件不能为空', trigger: 'change',}
                ],
                size: {
                    xs: 12,
                    sm: 12,
                    md: 12,
                    lg: 12,
                    xl: 12,
                },
            },]

 -->
